<template>
    <div class="header" :class="[bg?'bard':'',color?'black':'white']">
        <p>{{title}}</p>
        <van-icon @click="$router.go(-1)" size="26px" :color="white" name="arrow-left" />
        <span class="span">
            <slot></slot>
        </span>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String
        },
        bg: {
            type: String
        },
        color: {
            type: String,
            default: 'white'
        }
    },
    data() {
        return {
            white: ''
        };
    },
    methods: {

    },
    components: {

    },
};
</script>

<style lang="scss" scoped>
.bard {
    background: #548eeb;
}

.black {
    color: black;
}

.white {
    color: white,
}

.header {
    width: 100%;
    height: 144px;

    position: relative;

    p {
        text-align: center;
        height: 63px;
        line-height: 63px;
        width: 100%;
        font-size: 25px;

        margin: 0;
    }

    .van-icon {
        position: absolute;
        font-size: 25px;
        top: 18px;
        left: 10px;
    }
    .span{
        position: absolute;
        right: 60px;
        top: 1px;
        font-size: 20px;
    }
}
</style>
